<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>
<div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
        <div class="container">
            <a href="#">
                <img src="../../assets/images/see.jpg" width="100%" alt=""/>
            </a>
        </div>
    </section>

    <section class="mt-3">
        <div class="container">
            <div class="card" style="background-color: white;">
                <div class="card-body">
                    <div class="text-center">
                        <h2 class="my-4">{{ article.articleName }}</h2>
                        <p>
                            <i class="bi bi-folder2-open opacity-50"></i>
                            <span class="card-text articleMsg">{{ article.articleTag }}</span>
                            <i class="bi bi-tags opacity-50 ms-2"></i>
                            <!--                            <span class="card-text articleMsg">连接池</span>-->
                            <!--                            <i class="bi bi-alarm opacity-50  ms-2"></i>-->
                            <span class="card-text articleMsg">{{ article.updateTime }}</span>
                            <a href="#" class="card-link articleMsg ms-2" @click="star">
                                <i class="bi bi-hand-thumbs-up-fill opacity-50"></i> {{ article.articleStarNum }}
                            </a>
                            <!--                            阅读量-->
                            <i class="bi bi-book-half opacity-50 ms-2"></i>
                            <span class="card-text articleMsg">{{ article.articleReadCount }}</span>
                        </p>
                        <!--                        内容-->
                        <hr class="my-4"/>
                        <p class="text-start" v-html="article.articleContent">
                        </p>
                    </div>
                    <hr class="my-4"/>
                    <div>
                        <h3>相关文章</h3>
                        <ul class="list-group list-group-flush mb-3">
                            <li class="list-group-item" style="border: none;">&bull;
                                <a href="#" class="text-info article">面试宝典分享</a>
                            </li>
                            <li class="list-group-item">&bull;
                                <a href="#" class="text-info article">CSDN分享</a>
                            </li>
                        </ul>


                        <div style="background-color: #fafbfc;">
                            <div class="d-flex">
                                <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                                <input class="form-control h-75 mt-3" v-model="message" placeholder="请输入评论..."/>
                            </div>
                            <button type="button" @click="pushComment" class="btn btn-primary"
                                    style="width: 100px;margin-left: 55px;">
                                发表评论
                            </button>
                        </div>

                        <hr/>

                        <div v-for="item in comment">
                            <div class="delBtn" @click="delComment(item.id)">
                                <i class="bi bi-trash3-fill"></i>
                            </div>
                            <div>
                                <div class="d-flex">
                                    <img src="../../assets/images/p28.jpg" alt="" width="40px"
                                         class="rounded-circle m-2"/>
                                    <div class="mt-1">
                                    <span class="text-dark fw-bolder h6">游客:
                                        <span> {{ item.nickname }}</span>
                                    </span>
                                        <br/>
                                        <span>{{ item.createTime }}</span>
                                    </div>
                                </div>
                                <span style="margin-left: 55px;">{{ item.content }}</span>
                                <hr class="my-2"/>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[5, 10,15]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="totals">
                            </el-pagination>
                        </div>

                        <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                          d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                        <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                            <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                                但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                            </p>
                            <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            article: {},
            message: null,
            articleId: null,
            comment: [],
            currentPage: 1,
            pageSize: 5,
            totals: 0,
            articleReadCount:null

        },
        methods: {
            handleUrl(url) {
                if (url) {//http://127.0.0.1/views/blog-detail.html?id=1&name=zs&age=11
                    //定义接收对象
                    var map = [];
                    var split = url.split("?");
                    if (split[1]) {//id=1&name=zs&age=11
                        var split1 = split[1].split("&");
                        split1.forEach((value, index) => {
                            var split2 = value.split("=");
                            map.push({
                                key: split2[0],
                                value: split2[1]
                            })
                        })
                        return map;
                    }
                }
            },
            getDetail(id) {
                this.$http.get("/article/" + id, {}).then(res => {
                    if (res.data.success) {
                        this.article = res.data.data;
                    }
                    console.log(res.data.data)
                })

            },
            star() {
                this.$http.get("/article/star/" + this.article.id, {}).then(res => {
                    console.log(res.data.data)
                    if (res.data.data) {
                        this.article.articleStarNum = res.data.data
                    }
                })
            },
            handleSizeChange(currentPage) {
                this.currentPage = currentPage
                this.getDetail();
            },
            handleCurrentChange(pageSize) {
                this.pageSize = pageSize;
                this.getDetail();
            },
            commentPage() {
                var data = {
                    "keyword": this.keyword,  // key【后端的接收参数一样】 : value【前端data里面的值】
                    "page": this.currentPage,// key【后端的接收参数一样】 : value【前端data里面的值】
                    "size": this.pageSize    // key【后端的接收参数一样】 : value【前端data里面的值】
                }
                this.$http.post("/comment/commentPage", data).then(res => {
                    // console.log(res)
                    if (res.data.success) {
                        this.comment = res.data.data.content
                        console.log(res.data.data.content)
                    }
                })
            },


            loadComment(id) {
                this.$http.get("/comment/article/" + id, {}).then(res => {
                    this.comment = res.data
                })
            },
            pushComment() {
                if (this.message == null) {
                    return;
                }
                let data = {
                    content: this.message,
                    articleId: this.articleId
                }
                this.$http.post("/comment", data).then(res => {
                    if (res.data.success) {
                        console.log(1)
                        this.loadComment(this.articleId)
                        this.message = null
                    }
                })
            },
            delComment(id) {
                // console.log(1)
                // console.log(this.item.id);
                this.$http.delete("/comment/" + id).then(res => {
                    // console.log(res)
                    if (res.data.success) {
                        this.loadComment(this.articleId)
                    }
                })
            }
        },
        mounted() {
            var handleUrl = this.handleUrl(window.location.href);
            console.log(handleUrl[0].value)
            this.articleId = handleUrl[0].value;
            this.getDetail(handleUrl[0].value)
            this.loadComment(handleUrl[0].value);
            this.commentPage();
        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue')
        }
    })
</script>

</body>

</html>
